<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>如风壁纸 - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-gray-50 text-gray-900 font-sans">
    <div id="app" class="phone-container relative overflow-hidden mx-auto">
        <!-- Status Bar -->
        <div id="status-bar" class="status-bar flex justify-between items-center px-5 py-1 bg-black bg-opacity-10 text-white text-xs">
            <span id="time">9:41</span>
            <div class="status-icons flex space-x-1">
                <span><i class="fas fa-signal"></i></span>
                <span><i class="fas fa-wifi"></i></span>
                <span><i class="fas fa-battery-three-quarters"></i></span>
            </div>
        </div>

        <!-- Main Content Area -->
        <div id="content" class="content-area bg-white">
            <!-- Home Page Content -->
            <div class="p-4">
                <h1 class="text-2xl font-bold mb-2">如风壁纸</h1>
                <p class="text-sm text-gray-500 mb-4">精选高质量壁纸，让您的设备焕然一新</p>
                
                <!-- 搜索框 -->
                <div class="search-container mb-4">
                    <div class="relative">
                        <input type="text" id="search-input" placeholder="搜索壁纸..." class="w-full bg-gray-100 rounded-full py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-white transition-all">
                        <span class="absolute left-3 top-2.5 text-gray-400">
                            <i class="fas fa-search"></i>
                        </span>
                        <button id="clear-search" class="absolute right-3 top-2.5 text-gray-400 hidden">
                            <i class="fas fa-times-circle"></i>
                        </button>
                    </div>
                </div>
                
                <div class="category-filters">
                    <div class="filter-chip active">全部</div>
                    <div class="filter-chip" data-category="nature">自然风光</div>
                    <div class="filter-chip" data-category="city">城市风景</div>
                    <div class="filter-chip" data-category="abstract">抽象艺术</div>
                    <div class="filter-chip" data-category="minimal">简约设计</div>
                    <div class="filter-chip" data-category="dark">深色系列</div>
                    <div class="filter-chip" data-category="bright">明亮系列</div>
                </div>
            </div>
            
            <div class="wallpaper-grid">
                <!-- Wallpaper Items -->
                <div class="wallpaper-item" data-id="1">
                    <img src="https://picsum.photos/seed/wall1/900/1600" alt="Wallpaper" loading="lazy" />
                </div>
                <div class="wallpaper-item" data-id="2">
                    <img src="https://picsum.photos/seed/wall2/900/1600" alt="Wallpaper" loading="lazy" />
                </div>
                <div class="wallpaper-item" data-id="3">
                    <img src="https://picsum.photos/seed/wall3/900/1600" alt="Wallpaper" loading="lazy" />
                </div>
                <div class="wallpaper-item" data-id="4">
                    <img src="https://picsum.photos/seed/wall4/900/1600" alt="Wallpaper" loading="lazy" />
                </div>
                <div class="wallpaper-item" data-id="5">
                    <img src="https://picsum.photos/seed/wall5/900/1600" alt="Wallpaper" loading="lazy" />
                </div>
                <div class="wallpaper-item" data-id="6">
                    <img src="https://picsum.photos/seed/wall6/900/1600" alt="Wallpaper" loading="lazy" />
                </div>
                <div class="wallpaper-item" data-id="7">
                    <img src="https://picsum.photos/seed/wall7/900/1600" alt="Wallpaper" loading="lazy" />
                </div>
                <div class="wallpaper-item" data-id="8">
                    <img src="https://picsum.photos/seed/wall8/900/1600" alt="Wallpaper" loading="lazy" />
                </div>
            </div>
        </div>

        <!-- Tab Bar -->
        <div id="tab-bar" class="tab-bar flex justify-around items-center px-2 py-3 bg-white border-t border-gray-200">
            <a href="home.html" class="tab-item flex flex-col items-center text-blue-500">
                <i class="fas fa-home text-lg"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="categories.html" class="tab-item flex flex-col items-center text-gray-500">
                <i class="fas fa-th-large text-lg"></i>
                <span class="text-xs mt-1">分类</span>
            </a>
            <a href="favorites.html" class="tab-item flex flex-col items-center text-gray-500">
                <i class="fas fa-heart text-lg"></i>
                <span class="text-xs mt-1">收藏</span>
            </a>
            <a href="settings.html" class="tab-item flex flex-col items-center text-gray-500">
                <i class="fas fa-cog text-lg"></i>
                <span class="text-xs mt-1">设置</span>
            </a>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // Initialize clock for this page
        function updateClock() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.getElementById('time').textContent = `${hours}:${minutes}`;
        }
        
        // Update clock
        updateClock();
        setInterval(updateClock, 60000);
        
        // 搜索功能
        const searchInput = document.getElementById('search-input');
        const clearSearchBtn = document.getElementById('clear-search');
        const wallpaperItems = document.querySelectorAll('.wallpaper-item');
        
        // 搜索输入事件
        searchInput.addEventListener('input', () => {
            const searchTerm = searchInput.value.toLowerCase().trim();
            
            // 控制清除按钮显示
            if (searchTerm.length > 0) {
                clearSearchBtn.classList.remove('hidden');
            } else {
                clearSearchBtn.classList.add('hidden');
            }
            
            // 模拟搜索功能（在实际应用中，这里应该会有更复杂的搜索逻辑）
            if (searchTerm) {
                // 为了演示，我们会根据ID中是否包含搜索词的数字来过滤壁纸
                // 例如：搜索"1"会显示ID为1的壁纸
                wallpaperItems.forEach(item => {
                    const id = item.getAttribute('data-id');
                    if (id.includes(searchTerm)) {
                        item.classList.remove('hidden');
                    } else {
                        item.classList.add('hidden');
                    }
                });
            } else {
                // 如果搜索框为空，显示所有壁纸
                wallpaperItems.forEach(item => {
                    item.classList.remove('hidden');
                });
            }
        });
        
        // 清除搜索
        clearSearchBtn.addEventListener('click', () => {
            searchInput.value = '';
            clearSearchBtn.classList.add('hidden');
            
            // 显示所有壁纸
            wallpaperItems.forEach(item => {
                item.classList.remove('hidden');
            });
            
            // 让搜索框失去焦点
            searchInput.blur();
        });
        
        // Add event listeners
        document.querySelectorAll('.wallpaper-item').forEach(item => {
            item.addEventListener('click', () => {
                const id = item.getAttribute('data-id');
                window.location.href = `detail.html?id=${id}`;
            });
        });
        
        document.querySelectorAll('.filter-chip').forEach(chip => {
            chip.addEventListener('click', () => {
                // Update active state
                document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
                chip.classList.add('active');
                
                // For demo purposes, just add a fade effect
                const wallpaperGrid = document.querySelector('.wallpaper-grid');
                wallpaperGrid.style.opacity = 0.5;
                setTimeout(() => {
                    wallpaperGrid.style.opacity = 1;
                }, 300);
            });
        });
    </script>
</body>
</html> 